<template>
 <div id="SlotRecommMV">
    <ul >
      
        <li v-for="(items,index) in data" :key="index">
            <!-- <img :src="items.coverImgUrl" alt=""> -->
            <div class="picture">
                <img :src="items.cover" alt="">
                <p>
                    <!-- <span class="iconfont">&#xe699;</span>
                <span class="DTName">网易云音乐官方歌单网易云音乐官方歌单  </span> -->
                 <span class="iconfont">&#xe699;</span>
                </p>
                <div class="playCount">
                    <span class="iconfont">&#xe769;</span>
                    <span>{{items.playCount}}</span>
                </div>
            </div>
            <span  class="name">{{items.name}}</span>
            <span  class="name2">{{items.artistName}}</span>
        </li>
   
    </ul>
   <div style="height:520px"></div>
 </div>   
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    data() {
        return {
            spNowrap:'',
            // 分类歌单列表
            PlayList:[]
        }
    },
    props:{
        data:{
            typeof:Object || Array,
            
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
  watch:{
    data(newVal,oldVal) {
        this.PlayList = newVal
        console.log(this.PlayList)
    },
   },
   
     mounted() {
        //    this.spNowrap = this.data[1].type
        //    console.log(this.data)
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#SlotRecommMV{
    margin: 10px;
    // height:3.802083rem /* 730/192 */;
    .title{
        display: flex;
           //  justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/

        .rightS{
            font-size: 35px;
              margin-bottom: 8px;
              font-weight: inherit;
    }
    }
  
    h1{
        margin-bottom: 8px;
        color: #373737;
    }
    ul{
            box-sizing: border-box;
        //  height:3.802083rem /* 730/192 */;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        //  justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
    }
@media(max-width:1600px){//当屏幕最大669时，执行下面css
li{
width: 410px;
margin-right: 25px;
}
}
 
@media(min-width:1601px){//当屏幕最小669时，执行下面
li{
width: 320px;
margin-right: 22px;
}
}
     li{
        margin-top: 15px;
        .name{
            margin-top: 5px;
            font-size: 18px;
             text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
display: block;
            width:100%
        }
        .name2{
            margin-top: 5px;
            font-size: 15px;
            color: #CFCFCF;
             text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
display: block;
            width:100%
        }
            //  width: calc(calc(100% / 3));
            
            // height: 48%;
            box-sizing: border-box;
            // border: 1px solid #000;
        // span{
        //     display: block;
        //     // width:92%;
        //     color: #373737;
        // }
         .picture{
            width:100%;
           position: relative;
     

@media(max-width:1600px){//当屏幕最大669时，执行下面css
img{
width: 410px;
height: 233px;
}
}
 
@media(min-width:1601px){//当屏幕最小669时，执行下面
img{
width: 320px;
height: 184px;
}
}
            // img{
            //     width: 100%;
            // } 
             .playCount{
        span{
            color: white;
            font-size:16px;
        }
        position: absolute;
    right: 10px;
    top: 10px;
    } 
    p{
  display: flex;
   padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    align-items: center;
    // justify-content: center;
    max-width: 95%;
    position: absolute;
    bottom: 3px;
    right: 5px;
    span{
        color: white;
    }
                        .DTName{
//         position: absolute;
 text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
    // left: 5px;
    // bottom: 60px;
        font-size: 16px;
        // color: white;
        max-width: 85%;
        margin-left: 5px;
    }
   
    }
        }
        // .name{
        //     display: block;
        //     width:92%;
        //     color: #373737;
        // }
        img{
            border-radius: 5%;
        }
     }

   
   }
 

</style>